<!DOCTYPE HTML>
<html lang="en">

<head>
<title>文件上传</title>
<meta charset='UTF-8' />
<meta name='viewport'
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
<link rel="stylesheet" type="text/css" href="../css/webuploader.css">
<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
<script type="text/javascript" src="../js/jquery.1.10.2.js"></script>
<script type="text/javascript" src="../js/webuploader.js"></script>
</head>
	<!--dom结构部分-->
	<div id="uploader" class="wu-example">
	    <!--用来存放文件信息-->
	    <div id="fileList" class="uploader-list"></div>
	    <div class="btns">
	        <div id="filePicker">选择文件</div>
	    </div>
	</div>
	
	<script type="text/javascript">
		// Web Uploader实例
	    var uploader;
	
		// 图片上传demo
		jQuery(function() {
			var $ = jQuery,
	        $list = $('#fileList'),
		
		    // 初始化Web Uploader
		    uploader = WebUploader.create({
	
		        // 自动上传。
		        auto: true,
	
		        // swf文件路径
		        swf: '../js/Uploader.swf',
	
		        // 文件接收服务端。
				server: 'http://192.168.60.134:9082/uploadFile',
	
		        // 选择文件的按钮。可选。
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '#filePicker',
		        
		        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
		        resize: false
	
		    });
	
		 	// 当有文件被添加进队列的时候
		    uploader.on( 'fileQueued', function( file ) {
		    	var $li = $(
		                '<div id="' + file.id + '" class="file-item thumbnail">' +
		                    '<img>' +
		                    '<div class="info">' + file.name + '</div>' +
		                '</div>'
		                ),
		            $img = $li.find('img');


		        // $list为容器jQuery实例
		        $list.append( $li );
		        
				// 创建缩略图
		        // 如果为非图片文件，可以不用调用此方法。
		        // thumbnailWidth x thumbnailHeight 为 100 x 100
		        uploader.makeThumb( file, function( error, src ) {
		            if ( error ) {
		                $img.replaceWith('<span>不能预览</span>');
		                return;
		            }

		            $img.attr( 'src', src );
		        }, 100, 100 );
		    });
	
		 	// 文件上传过程中创建进度条实时显示。
		    uploader.on( 'uploadProgress', function( file, percentage ) {
		        var $li = $( '#'+file.id ),
		            $percent = $li.find('.progress .progress-bar');

		        // 避免重复创建
		        if ( !$percent.length ) {
		            $percent = $('<div class="progress progress-striped active">' +
		              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
		              '</div>' +
		            '</div>').appendTo( $li ).find('.progress-bar');
		        }

		        $li.find('p.state').text('上传中');

		        $percent.css( 'width', percentage * 100 + '%' );
		    });
	
		    uploader.on( 'uploadSuccess', function( file ) {
		        $( '#'+file.id ).find('p.state').text('已上传');
		    });

		    uploader.on( 'uploadError', function( file ) {
		        $( '#'+file.id ).find('p.state').text('上传出错');
		    });

		    uploader.on( 'uploadComplete', function( file ) {
		        $( '#'+file.id ).find('.progress').fadeOut();
		    });
		    
		});
	</script>
</html>